<template>
    <div class="l-h-24">
        <div class="module_tit pr f-16 f-400 c-fff d-i-b h-24">
            <span class="module_tit-span bg-c">{{ title }}</span>
            <div class="tit_icon p-a">
                <div class="line-1 bg-c d-b p-a"></div>
                <div class="line-2 d-b p-a"></div>
            </div>
            <div class="dfn" style="border-top-color: rgb(38, 74, 90)"></div>
        </div>
        <div class="line_box bg-c"></div>
    </div>
</template>

<script>
export default {
    props: {
        title:{
            type: String,
            default: ''
        }
    },
    data() {
        return {}
    },
    methods: {},
}
</script>

<style lang="scss" scoped>
$color: #4e7282;
.module_tit {
    margin-left: -16px;
    min-width: 140px;
    line-height: 24px;
    background-color: $color;
    .tit_icon {
        height: 100%;
        width: 50px;
        right: -1px;
        top: 0;
        overflow: hidden;
        .line-1 {
            width: 27px;
            height: 50px;
            overflow: hidden;
            border-style: solid;
            border-width: 26px 0 0 26px;
            background-color: #fff;
            right: -12px;
            top: -18px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .line-2 {
            border: 2px solid #fff;
            content: '';
            width: 7px !important;
            height: 50px !important;
         
            right: 25px;
            top: -12px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
    .dfn {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 9px 0 0 16px;
        border-color: $color transparent transparent;
        position: absolute;
        left: 0;
        top: 100%;
    }
}
.module_tit-span {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 25px;
    padding-right: 50px;
    background-color: $color;
    color: #fff;
    white-space: nowrap;
    position: relative;
}
.line_box {
    position: relative;
    top: -1px;
    height: 1px;
}

.bg-c {
    background-color: $color;
}
</style>
